﻿@model StudentCreateViewModel
@inject IStudentRepository _students

@{
    ViewBag.Title = "添加学生";
}

<form enctype="multipart/form-data" asp-controller="Home" asp-action="Create" method="post" class="mt-3">

    <div class="text-danger" asp-validation-summary="All"></div>

    <div class="form-group row">
        <label asp-for="Name" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Name" class="form-control" placeholder="请输入名称" />
            <span class="text-danger" asp-validation-for="Name"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Email" class="form-control" placeholder="请输入邮箱" />
            <span class="text-danger" asp-validation-for="Email"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="ClassName" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <select asp-for="ClassName" asp-items="Html.GetEnumSelectList<ClassNameEnum>()" class="form-control">
                <option value="">请选择</option>
            </select>
            <span class="text-danger" asp-validation-for="ClassName"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Photo" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <div class="custom-file">
                <input asp-for="Photos" class="form-control custom-file-input" />
                <label class="custom-file-label">请选择图片....</label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Photos" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <div class="custom-file">
                <input asp-for="Photos" multiple id="gallery-input" class="form-control custom-file-input" />
                <label id="gallery-label" class="custom-file-label">请选择图片 可以一次选择多张</label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            学生总人数：@_students.GetAllStudents().Count().ToString()
        </div>
    </div>

    @section Scripts{
        <script type="text/javascript">
            $(document).ready(function () {
                $('.custom-file-input').on('change', function () {
                    var fileName = $(this).val().split('\\').pop();
                    $(this).next('.custom-file-label').html(fileName);
                });

                $('#gallery-input').on('change', function () {
                    var label = $(this).next('#gallery-label');
                    var files = $(this)[0].files;
                    if (files.length > 1) {
                        label.html(`你已经选择了${files.length}个文件`);
                    } else if (files.length == 1) {
                        label.html(files[0].name);
                    }
                });
            });
        </script>
    }
</form>
